<template>
  <view class="inventory-delete-container">
    <view class="page-header">
      <text class="page-title">删除库存</text>
    </view>

    <view v-if="loading" class="loading-container">
      <text>加载中...</text>
    </view>

    <view v-else class="delete-container">
      <view class="warning-section">
        <text class="warning-icon">⚠️</text>
        <text class="warning-title">确认删除</text>
        <text class="warning-message">您即将删除以下库存物品，此操作不可撤销！</text>
      </view>

      <view class="item-info-section">
        <text class="section-title">物品信息</text>
        
        <view class="info-item">
          <text class="info-label">物品编码：</text>
          <text class="info-value">{{ inventory.item_code || '-' }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">物品名称：</text>
          <text class="info-value">{{ inventory.item_name || '-' }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">物品类型：</text>
          <text class="type-badge" :class="'type-' + inventory.item_type">{{ getItemTypeText(inventory.item_type) }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">当前库存：</text>
          <text class="info-value" :class="{ 'text-danger': inventory.current_quantity > 0 }">
            {{ inventory.current_quantity || 0 }} {{ inventory.unit || '' }}
          </text>
        </view>

        <view class="info-item">
          <text class="info-label">单价：</text>
          <text class="info-value">¥{{ inventory.unit_price || 0 }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">供应商：</text>
          <text class="info-value">{{ inventory.supplier || '-' }}</text>
        </view>

        <view v-if="inventory.is_controlled" class="warning-notice">
          <text class="warning-text">⚠️ 此物品为管控物品，删除前请确保已妥善处理相关记录</text>
        </view>

        <view v-if="inventory.current_quantity > 0" class="warning-notice">
          <text class="warning-text">⚠️ 当前库存不为0，删除将导致库存数据丢失</text>
        </view>
      </view>

      <view class="confirm-section">
        <text class="confirm-text">请再次确认是否要删除此库存物品</text>
        <view class="checkbox-wrapper">
          <checkbox-group @change="onConfirmChange">
            <label class="confirm-checkbox">
              <checkbox :checked="confirmed" value="confirmed" />
              <text>我已了解风险，确认删除</text>
            </label>
          </checkbox-group>
        </view>
      </view>

      <view class="delete-actions">
        <button class="btn-delete" :disabled="!confirmed" @click="handleDelete">确认删除</button>
        <button class="btn-cancel" @click="handleCancel">取消</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

const inventoryObj = uniCloud.importObject('dh-inventory')

const loading = ref(true)
const inventoryId = ref('')
const confirmed = ref(false)

const inventory = reactive({
  item_code: '',
  item_name: '',
  item_type: 4,
  current_quantity: 0,
  unit: '',
  unit_price: 0,
  supplier: '',
  is_controlled: false
})

onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  inventoryId.value = currentPage.options.id || ''
  
  if (inventoryId.value) {
    loadData()
  }
})

async function loadData() {
  loading.value = true
  try {
    const result = await inventoryObj.getInventoryById(inventoryId.value)
    if (result.code === 200 && result.data) {
      Object.assign(inventory, result.data)
    } else {
      uni.showToast({ title: result.message || '加载失败', icon: 'none' })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  } catch (err) {
    console.error('加载失败:', err)
    uni.showToast({ title: err.message || '加载失败', icon: 'none' })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  } finally {
    loading.value = false
  }
}

function getItemTypeText(type) {
  const typeMap = { 1: '药品', 2: '医疗器械', 3: '耗材', 4: '其他' }
  return typeMap[type] || '未知'
}

function onConfirmChange(e) {
  confirmed.value = e.detail.value.includes('confirmed')
}

async function handleDelete() {
  if (!confirmed.value) {
    uni.showToast({ title: '请先确认删除操作', icon: 'none' })
    return
  }

  uni.showModal({
    title: '最后确认',
    content: '确定要删除此库存物品吗？此操作不可撤销！',
    confirmText: '确定删除',
    confirmColor: '#ef4444',
    success: async (res) => {
      if (res.confirm) {
        try {
          const result = await inventoryObj.deleteInventory(inventoryId.value)
          if (result.code === 200) {
            uni.showToast({ title: '删除成功', icon: 'success' })
            setTimeout(() => {
              uni.navigateBack({ delta: 2 }) // 返回列表页
            }, 1500)
          } else {
            uni.showToast({ title: result.message || '删除失败', icon: 'none' })
          }
        } catch (err) {
          console.error('删除失败:', err)
          uni.showToast({ title: err.message || '删除失败', icon: 'none' })
        }
      }
    }
  })
}

function handleCancel() {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.inventory-delete-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx;
  background-color: #fff;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #6b7280;
}

.delete-container {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
}

.warning-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 20rpx;
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

.warning-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.warning-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 10rpx;
}

.warning-message {
  font-size: 26rpx;
  color: #78350f;
  text-align: center;
  line-height: 1.5;
}

.item-info-section {
  margin-bottom: 30rpx;
}

.section-title {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
  border-left: 4px solid #ef4444;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 15rpx 0;
  border-bottom: 1px solid #f3f4f6;
  
  &:last-child {
    border-bottom: none;
  }
}

.info-label {
  flex-shrink: 0;
  width: 180rpx;
  font-size: 28rpx;
  color: #6b7280;
  font-weight: 500;
}

.info-value {
  flex: 1;
  font-size: 28rpx;
  color: #1f2937;
  font-weight: 500;
  
  &.text-danger {
    color: #dc2626;
    font-weight: 600;
  }
}

.type-badge {
  display: inline-block;
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-weight: 600;
  
  &.type-1 { background-color: #dbeafe; color: #1e40af; }
  &.type-2 { background-color: #e0e7ff; color: #3730a3; }
  &.type-3 { background-color: #fef3c7; color: #92400e; }
  &.type-4 { background-color: #e5e7eb; color: #374151; }
}

.warning-notice {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #fef3c7;
  border-left: 4px solid #f59e0b;
  border-radius: 8rpx;
}

.warning-text {
  font-size: 26rpx;
  color: #92400e;
  line-height: 1.5;
}

.confirm-section {
  padding: 30rpx;
  background-color: #fef2f2;
  border: 2px solid #fecaca;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

.confirm-text {
  display: block;
  font-size: 28rpx;
  color: #991b1b;
  font-weight: 600;
  margin-bottom: 20rpx;
  text-align: center;
}

.checkbox-wrapper {
  display: flex;
  justify-content: center;
}

.confirm-checkbox {
  display: flex;
  align-items: center;
  gap: 15rpx;
  font-size: 26rpx;
  color: #991b1b;
  font-weight: 500;
}

.delete-actions {
  display: flex;
  gap: 20rpx;
}

.btn-delete, .btn-cancel {
  flex: 1;
  padding: 25rpx;
  border-radius: 8rpx;
  font-size: 32rpx;
  border: none;
  cursor: pointer;
  text-align: center;
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.btn-delete {
  background-color: #ef4444;
  color: #fff;
  
  &:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
  }
}

.btn-cancel {
  background-color: #6c757d;
  color: #fff;
}
</style>

